<template>
    <up-popup class="lotglaPopup" :safeAreaInsetTop="true" mode="top" :show="show" :overlay="false" @close="close" @open="openCallback">
        <up-navbar bgColor="#7099B4" :safeAreaInsetTop="true" >
          <template #left>
            <up-icon size="35" :name="j8Ico"></up-icon>
            <up-text text="地段及政府撥地" color="#fff"></up-text>
          </template>
          <template #right>
              <up-icon size="28" :name="closePng" color="#fff"  @click="close"></up-icon>
          </template>
        </up-navbar>
      <view class="content">
          <bangs/>
        <up-gap height="10" bgColor="#ffffff00"></up-gap>
          <SearchPicker v-model="selectedFruit" @change="changeFruit"/>
          <up-gap height="15" bgColor="#ffffff00"></up-gap>
        <up-input placeholder="278"  :border="'surround'" v-model="value">
          <template #prefix>
            <up-text
              text="編號："
              margin="0 3px 0 0"
              color="#323233"
            ></up-text>
          </template>
        </up-input>
        <up-gap height="30" bgColor="#ffffff00"></up-gap>
          <up-row class="hk1980but">
              <up-col span="6">
                  <up-button text="取消" color="rgb(112, 153, 180)" @click="close"></up-button>
              </up-col>
              <up-col span="6">
                  <up-button @click="onSelectedClick">
                    <up-icon :name="searchPng" size="25" color="rgb(112, 153, 180)"></up-icon>
                  </up-button>
              </up-col>
          </up-row>
      </view>
  </up-popup>
</template>

<script setup  lang="ts">
import { ref } from 'vue';
import bangs from '@/pages/common/head/bangs.vue'
import closePng from '@/static/images/close.png'
import searchPng from '@/static/images/search1.png'
import j8Ico from '@/static/icon/J8.png'
import { mapStore } from '@/stores'
import { SEARCHLOTGAL } from '@/api/system/map'
import SearchPicker from '@/components/SearchPicker/index.vue';

const mapStoreFun = mapStore();

// 创建响应式数据
const show = ref(false);

const emit = defineEmits<{
  (e: 'click', data: any,key:any): void
}>()

const value = ref('')
const selectedFruit = ref({
  value: '',
  alias: '',
  label: ''
})

const changeFruit = (item: any)=>{
}



// 定义方法
function open() {
  mapStoreFun.SUM_MAPTYPE(1)
  value.value = ''
  show.value = true
}

function openCallback() {
}

function close() {
  mapStoreFun.SUM_MAPTYPE(-1)
  show.value = false;
}


function onSelectedClick() {
  if(selectedFruit.value?.value?.length<1){
    uni.showToast({
      title: '请选择地段类型',
      icon: 'none'
    })
    return
  }

  if(value.value?.length<1){
    uni.showToast({
      title: '请输入地段编号',
      icon: 'none'
    })
    return
  }
  const data = selectedFruit.value?.value+" "+value.value
  close();
  emit('click', data,selectedFruit.value?.label)
}

defineExpose({
  open,
  close
});

</script>

<style scoped>
.lotglaPopup .content {
  padding: 20rpx 20rpx 0px 20rpx;
  background-color: #fff;
  border-radius: 0px;
  margin-bottom: 20rpx;
  overflow: hidden;
  }
.searchList {
  height: 35vh;
  overflow-y: auto;
}
.item {
  padding: 20rpx 20rpx;
  border-bottom: 1px solid #d9d4d4;
  .top {
    display: flex;
    font-weight: bold;
    font-size: 34rpx;
    .phone {
      margin-left: 60rpx;
    }
    .tag {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 20rpx;
        /* border-radius: 6rpx; */
        text-align: center;
        margin-left: 30rpx;
        background-color: rgb(49, 145, 253);
      }
      .red {
        background-color: red;
      }
    }
  }
  .bottom {
    display: flex;
    margin-top: 20rpx;
    font-size: 28rpx;
    justify-content: space-between;
    color: #999999;
  }
}
</style>

